<template>
    <div>
        <!-- 首页系列组件 -->
        <a-row type="flex" justify="center">
      		<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="banner">
				<img v-lazy="imgUrl" alt="">
      		</a-col>
    	</a-row>
        <a-row type="flex" justify="center">
      		<a-col :xs="23" :sm="12" :md="5" :lg="5" :xl="5" class="list" v-for="item in goodsList" :key="item.id" >
      		  	<commodity :data="item">
                    <template v-slot>
                        <router-link :to="'/details/' + item.id">
                            <button>立即选购</button>
                        </router-link>
                    </template>
                </commodity>
      		</a-col>
    	</a-row>
    </div>
</template>

<script>
import Commodity from './Commodity.vue'
import {getGoods} from '../assets/js/request.js'
export default {
    props: ["indexData"],
    components:{
        Commodity,
    },
    data() {
        return {
            oldList:[],
            goodsList:[],
            // 系列大图片
            imgUrl:""
        }
    },
    created() {
        getGoods(10, this.indexData)
        .then(res => {
            // console.log(this.indexData)
            res.rows.forEach(item => {
                this.oldList.push(item)
            })
        }).then(() => {
            this.imgUrl = this.oldList[0].s_goods_photos[0].path
            this.oldList.splice(0,1)
            this.goodsList = this.oldList
        })
        // console.log(this.goodsList)
    },
}
</script>

<style lang='scss' scoped>
    .banner {
        img {
            width: 100%;
        }
    }
    .list {
        margin: 50px 0;
        border-right: 1px solid black;
        &:last-child {
            border-right: 0px solid black;
        }
        button {
            font-size: 14px;
            width: 50%;
            height: 44px;
            background: #003150;
            color: white;
            margin: 20px 0 0;
        }
    }
</style>